<template>
    <div class="setting">
        <div class="leftCol">
            <div class="settingsMainHeader">设置</div>
            <!-- 子菜单 -->
            <ul class="setting-aside">
                <li
                    v-for="(item, index) in settingList"
                    :key="index"
                    :class="{ activeColor: activeName === item.name }"
                    @click="handleClick(item)"
                >
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <!-- 子菜单对应的路由 -->
        <div class="contentCol">
            <component :is="componentSrc"></component>
        </div>
    </div>
</template>
<script>
import Info from "../components/Info";
import Upload from "../components/Upload";
import UpdatePassword from "../components/UpdatePassword";

export default {
    name: "setting",
    components: {
        Info,
        Upload,
        UpdatePassword,
    },
    data() {
        return {
            settingList: [
                { name: "个人信息", path: "Info" },
                { name: "修改密码", path: "UpdatePassword" },
                { name: "修改头像", path: "Upload" },
            ],
            activeName: "个人信息",
            componentSrc: "Info",
        };
    },
    methods: {
        /**
         * 处理子菜单点击事件
         */
        handleClick(item) {
            this.activeName = item.name;
            this.componentSrc = item.path;
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/setting.scss";
</style>
